import React, { useEffect, useState } from 'react';
import { useParams, useNavigate } from 'react-router-dom'
import { getDiscDetail } from '@/api/recommend'
import {Tag,List} from 'antd'
import newStyle from '@/styles/recommendNew.module.scss'


export default function AlbumDetails() {
  const navigate = useNavigate();
  const toList = () => {
    navigate(-1);
  };
  const [newDiscData, setNewDiscData] = useState([])
  const [discData,setDiscData] = useState([])
  const { id } = useParams()

  const formatTime = (time) => {
    const date = new Date(time);
    const year = date.getFullYear();
    const month = ('0' + (date.getMonth() + 1)).slice(-2);
    const day = ('0' + date.getDate()).slice(-2);
    const formattedDateTime = year + '-' + month + '-' + day ;
    return formattedDateTime;
  }
  const formatTime1 = (time) => {
    const date = new Date(time);

    const minutes = ('0' + date.getMinutes()).slice(-2);
    const seconds = ('0' + date.getSeconds()).slice(-2);
    const formattedDateTime = + minutes + ':' + seconds;
    return formattedDateTime;
  }

  useEffect(() => {
    getDiscDetail(id).then(res => {
      console.log(res.data);
      setDiscData(res.data.songs)
      setNewDiscData(res.data.album)
    })
  },[id])
  return (
    <div>
      <button style={{ width: 60, height: 30, margin: 10 }} onClick={toList}>返回</button>
      <div style={{display:'flex'}}>
      <img
        src={newDiscData.picUrl} alt=""
        style={{width:'15%',height:'20%',borderRadius:15,margin:55,marginLeft:'15%'}}
        />
        <section style={{  marginTop: 55 }}>
          <p style={{ fontSize: 20, fontWeight: '900', marginTop:"25%"}}><Tag color="red">专辑</Tag>{newDiscData.name}</p>
          <p style={{ marginTop: "30%",fontSize:16 }}>歌手：{newDiscData.artist?.name}</p>
          <p style={{ marginTop: "30%", fontSize: 16 }}>时间：{formatTime(+newDiscData.publishTime)}</p>
        </section>
        <section style={{width:'28%',marginLeft:'10%',marginTop:80,fontSize:18}}>
          {newDiscData.description}
        </section>
      </div>
      <div>
        <List
          className={newStyle.discDetail}
          style={{ width: 850, position: 'relative', left: '15%', marginTop: 30 }}
          size="small"
          dataSource={discData}
          renderItem={(item, i) => (
            <List.Item
              key={item.id}
            >
              <p style={{ width: 80 }}>
                {i < 9 ? '0' + (i + 1) : i + 1}
              </p>
              <section style={{ lineHeight: '100%', width: '35%' }}>{item.name} &nbsp; <Tag color="red">Hi-Res</Tag></section>
              <p style={{ lineHeight: '100%' }}>{item.ar?.[0].name}</p>
              <p style={{ lineHeight: '100%' }}>{item.al?.name}</p>
              <p style={{ lineHeight: '100%' }}>{formatTime1(+item.dt)}</p>
              
            </List.Item>
          )}
        />
      </div>
    </div>
  )
}
